<template>
  <div>
    <input class="input-flie" ref="inputFlieRef" type="file" @change="onFileChange" :multiple="limit !== 1">

    <div class="upload-box" v-if="!ifSlot" @click="importClick">
      <img v-if="icon" :src="icon" alt="">
      <el-icon v-else class="upload-demo-icon">
        <Plus />
      </el-icon>
    </div>
    <slot v-else></slot>
  </div>
</template>

<script setup lang="ts">
import { ElInput, ElMessage } from 'element-plus';
import { ref } from 'vue';
import { Plus } from '@element-plus/icons-vue'

const props = defineProps({
  limit: {
    type: Number,
    default: 999,
  },
  ifSlot: {
    type: Boolean,
    default: false,
  },
  icon: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['importData']);
const { limit, ifSlot, icon } = toReactive(props)

const inputFlieRef = ref(ElInput);

// 导入
function importClick() {
  // 清空input
  inputFlieRef.value.value = ''
  inputFlieRef.value.click()
}


function onFileChange(event: any) {
  // console.log(event.target.files)
  emit('importData', { files: event.target.files })
}

defineExpose({
  importClick
})

</script>

<style lang="scss" scoped>
.input-flie {
  display: none;
}

.upload-box {
  border: 1px #dddde3 dashed;
  border-radius: 5px;
}
</style>
